
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>眼管家屈光中心</title>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="HandheldFriendly" content="True">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="http://h5.sxftech.com/assert/css/swiper.min.css">
    <link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" rel="stylesheet">


    <style>
        html,body {
            position:relative;
            height:100%;
        }
        html {
            overflow:hidden;
        }
        * {
            padding:0;
            margin:0;
        }
        li {
            list-style:none;
        }
        body {
            background:#fff;
            font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
            font-size:12px;
        }
        .img img {
            width:100%;
            display:block;
        }
        #top {
            position:absolute;
            top:0;
            z-index:5;
            width:100%;
            background:#fff;
        }
        #top .addr {
            height:36px;
            margin:0 auto;
            display:block;
        }
        #top .search {
            position:absolute;
            top:0;
            right:0;
            height:36px;
            display:block;
        }
        #nav {
            border-bottom:1px solid #ebebeb;
            display: fixed;
            top:10px;

        }
        #nav .swiper-slide span {
            margin:0 5px;
            text-align:center;
            display:block;
            line-height:2.5;
            font-size:.3rem;
            color:#333333;
        }
        #nav .bar {
            width:50px;
            height:3px;
            position:absolute;
            bottom:0px;
        }
        #nav .bar .color {
            width:36px;
            margin:0 auto;
            height:3px;
            background:#ff4891;
        }
        .banner img {
            width:100%;
            display:block;
        }
        .banner	.swiper-pagination {
            left:auto;
            right:7px;
            bottom:7px;
            width:auto;
            padding:2px 7px;
            border-radius:10px;
            color:#fff;
            background:rgba(0,0,0,.3);
        }
        #page {
            margin-bottom:50px;
            height:100%;
        }
        #page .slidepage {
            height:100%;
        }
        .scroll {
            height:100%;
        }
        .slidescroll {
            height:auto;
        }
        #footer {
            position:fixed;
            bottom:0;
            z-index:5;
        }

        .forms {
            padding: 0.32rem 0.64rem;
            font-family: PingFangSC-Regular;
            font-size: 0.37333333rem;
            line-height: 0.58666667rem;
        }
        .fengdie-components .apply{margin:0 .32rem}.fengdie-components .apply-title{margin:.4rem 0;font-size:.56rem;color:#333}.fengdie-components .apply-gutter{margin-bottom:.72rem;height:.06rem;width:.48rem}.fengdie-components .apply-footer-content{font-size:.28rem;color:#666}.fengdie-components .apply-footer button{display:block;margin:.8rem 0 .48rem;width:100%;line-height:.8rem;font-size:.32rem;color:#fff;border-radius:.04rem;border:none}.questionWrap .question{padding:.64rem 0;border-bottom:1px solid #ccc}.questionWrap .question-title{margin-bottom:.32rem;font-size:.32rem;font-weight:bolder;color:#333}.questionWrap .question-title-prefix{margin-right:.08rem;color:#999}.questionWrap .question-title-suffix{margin-left:.08rem;color:#fc3f3f}.questionWrap .question-extra{margin-top:.32rem;font-size:.26rem}.questionWrap .question-extra.error{color:red}.questionWrap .question:last-child{border-bottom:none}.questionWrap.theme-compact .question{padding-top:0;padding-bottom:.4rem;border-bottom:none}.questionWrap.theme-compact .question-title{margin-bottom:.16rem}.questionWrap.theme-compact .question:last-child{padding-bottom:0}.fd-field{padding:.24rem 0}.fd-field-main label{margin-left:.32rem;color:#333; font-size: .32rem}.fd-field-aux{margin-top:.32rem;font-size:0}.fd-field-aux img{width:100%}.fd-field:first-of-type{padding-top:0}.fd-field:last-of-type{padding-bottom:0}.Q-checkbox{position:relative}.Q-checkbox-shape{position:absolute;display:inline-block;width:.4rem;height:.4rem;top:0;left:0}.Q-checkbox input{position:relative;height:.4rem;width:.4rem;z-index:1;opacity:0;vertical-align:middle}.Q-input{padding:0 .16rem;width:100%;height:.8rem;font-size:.32rem;color:#666;line-height:1.2;background:#fafafa;border:1px solid #e9e9e9;box-sizing:border-box;}.Q-radio{position:relative}.Q-radio-shape{position:absolute;display:inline-block;width:.4rem;height:.4rem;top:0;left:0}.Q-radio input{position:relative;height:.4rem;width:.4rem;z-index:1;opacity:0;vertical-align:middle}.Q-textarea{padding:0 .16rem;width:100%;font-size:.32rem;color:#666;line-height:.78rem;background:#fafafa;border:1px solid #e9e9e9;box-sizing:border-box}.Q-rank{text-align:center}.Q-rank-shape{padding:.08rem .28rem;height:.64rem;width:.64rem}.Q-rank-shape:last-of-type{margin-right:0}.fd-link,.fd-link:focus,.fd-link:hover,.fd-link:link,.fd-link:visited{text-decoration:none}.fd-link.block{display:block}.fd-placeholder{padding:1.9rem .68rem 0;text-align:center}.fd-placeholder-img{display:block;margin:0 auto;height:3.6rem}.fd-placeholder-title{display:block;margin-top:.4rem;font-size:.4rem;font-weight:bolder;color:#000}.fd-placeholder-desc{display:block;margin-top:.16rem;font-size:.3rem;color:#999;white-space:pre-line}.fd-placeholder-action{margin-top:.32rem;font-size:.28rem}.fd-placeholder-action a{color:#1890ff;text-decoration:none}.fd-fullscreen-placeholder{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:9999}
        *,:after,:before{-webkit-tap-highlight-color:rgba(0,0,0,0)}blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}li{list-style:none}caption,th{text-align:left}q:after,q:before{content:""}input:password{ime-mode:disabled}:focus{outline:none}a,img{-webkit-touch-callout:none}h1,h2,h3,h4,h5,h6{font-weight:400}body,button,input,select,textarea{font-family:AvenirNext-Medium,PingFang-SC-Regular}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:.32rem;line-height:1.5;background:#fff}
        
        /* 多选列表*/
        .weui-cells_checkbox .weui-icon-checked:before{
            font-size: 0.46rem;
        }
        .weui-cells_checkbox{
            font-size: 0.36rem;
        }
        .weui-cells:after, .weui-cells:before {
            border:none;
        }
        .weui-cell:before{
            border:none;
        }

    </style>
    <script>
        !function(e){function t(n){if(i[n])return i[n].exports;var a=i[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.vw=function(e,t){var n=e||100,a=t||750,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),s=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),c=i.devicePixelRatio||1,u=r.documentElement,m=1,v=1/c;if(p);else if(d&&d[1]>534||s){u.style.fontSize=n+"px";var f=r.createElement("div");f.setAttribute("style","width: 1rem;display:none"),u.appendChild(f);var h=i.getComputedStyle(f).width;if(u.removeChild(f),h!==u.style.fontSize){var x=parseInt(h,10);m=100/x,v*=m}}else v=1;var w=r.querySelector('meta[name="viewport"]');w||(w=r.createElement("meta"),w.setAttribute("name","viewport"),r.head.appendChild(w)),w.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+v+",maximum-scale="+v+",minimum-scale="+v);var y=function(){u.style.fontSize=n/a*u.clientWidth*m+"px"};y(),i.addEventListener("resize",y)},e.exports=t["default"]}]);
        !function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);

        (function() {
            var clientWidth = document.documentElement.clientWidth;
            if (clientWidth > 750) {
                vw(100, 750);
            } else {
                flex();
            }
            window.px2rem = function (px) { return px / 100 + 'rem'; }
        })();

    </script>
</head>
<body style="font-size: 14px">

<div id="top" class="">
    <div class="swiper-container" id="nav">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="width:120px">
                <span style="color:rgba(255,72,145,1);">眼角膜塑形镜</span></div>
            <div class="swiper-slide" style="width:120px">
                <span>晶体植入</span></div>
            <div class="swiper-slide" style="width:120px">
                <span>老花矫正术</span></div>
            <div class="swiper-slide" style="width:120px">
                <span>高端白内障手术</span></div>
            <div class="swiper-slide" style="width:120px">
                <span>全飞秒激光</span></div>
            <div class="swiper-slide" style="width:120px">
                <span>半飞秒激光</span></div>
            <div class="swiper-slide" style="width:120px">
                <span>眼部整形手术</span></div>
            </div>
        </div>
    </div>
</div>
<div class="swiper-container fengdie-components" id="page">
    <div class="swiper-wrapper">
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <img style="border-radius:0;width:100%" src="https://sxftech-file.oss-cn-shenzhen.aliyuncs.com/55dc6dae57372ea47e63c18313e0e93f.jpg"/>

                        <section class="section" style="background-color:rgba(0, 0, 0, 0); position: relative; width: 90%; cursor:cursor; margin: 0 auto 0">
    <form class="questionWrap theme-compact fd-questionnaire-body"><section class="question" data-id="1">
        <h1 class="question-title"><span>姓名</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入姓名" data-aspm-click="page.questionBody-QInput"></div></section>
        <section class="question" data-id="2"><h1 class="question-title"><span>电话号码</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入电话号码" data-aspm-click="page.questionBody-QInput"></div></section>
        <section class="question" data-id="4"><h1 class="question-title">
            <span class="question-title-prefix">[多选]</span>
            <span>想了解的近视防控项目</span></h1>

            <div class="weui-cells weui-cells_checkbox">
                    <label class="weui-cell weui-check__label" for="s1">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s1">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>眼角膜塑形镜</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s2">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s2">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>晶体植入</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s3">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s3">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>老花矫正</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s4">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s4">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>高端白内障手术</p>
                            </div>
                    </label>
            </div>
    </section></form>
    <footer class="fd-questionnaire-footer"><div class="apply-footer"><button  onclick="verify(0)" data-aspm-click="page.applyFooter-btn" style="background: rgb(255, 0, 0);">提交</button></div></footer>
</section>                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <img style="border-radius:0;width:100%" src="https://sxftech-file.oss-cn-shenzhen.aliyuncs.com/2d93953913e68da3e5cdf6fbf5ccd68d.jpg"/>

<section class="section" style="background-color:rgba(0, 0, 0, 0); position: relative; width: 90%; cursor:cursor; margin: 0 auto 0">
    <form class="questionWrap theme-compact fd-questionnaire-body">
        <section class="question" data-id="1">
            <h1 class="question-title"><span>姓名</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div>
        </section>
        <section class="question" data-id="2"><h1 class="question-title"><span>电话号码</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section>
        <section class="question" data-id="4">
            <h1 class="question-title"><span class="question-title-prefix">[多选]</span><span>想了解的近视防控项目</span></h1>
            <div class="weui-cells weui-cells_checkbox">
                    <label class="weui-cell weui-check__label" for="s5">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s5">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>眼角膜塑形镜</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s6">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s6">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>晶体植入</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s7">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s7">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>老花矫正</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s8">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s8">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>高端白内障手术</p>
                            </div>
                    </label>
            </div>
</section>
</form>
    <footer class="fd-questionnaire-footer"><div class="apply-footer"><button onclick="verify(1)" data-aspm-click="page.applyFooter-btn" style="background: rgb(255, 0, 0);">提交</button></div></footer>
</section>                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <img style="border-radius:0;width:100%" src="https://sxftech-file.oss-cn-shenzhen.aliyuncs.com/6ca07ede11dcd533ce51a3e8e6c2cd5c.jpg"/>
<section class="section" style="background-color:rgba(0, 0, 0, 0); position: relative; width: 90%; cursor:cursor; margin: 0 auto 0">
    <form class="questionWrap theme-compact fd-questionnaire-body"><section class="question" data-id="1"><h1 class="question-title"><span>姓名</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section><section class="question" data-id="2"><h1 class="question-title"><span>电话号码</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section><section class="question" data-id="4">
        <h1 class="question-title"><span class="question-title-prefix">[多选]</span><span>想了解的近视防控项目</span></h1>
        <div class="weui-cells weui-cells_checkbox">
                <label class="weui-cell weui-check__label" for="s9">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s9">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>眼角膜塑形镜</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s10">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s10">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>晶体植入</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s11">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s11">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>老花矫正</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s12">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>高端白内障手术</p>
                        </div>
                </label>
        </div>
    </section></form>
    <footer class="fd-questionnaire-footer"><div class="apply-footer"><button onclick="verify(2)" data-aspm-click="page.applyFooter-btn" style="background: rgb(255, 0, 0);">提交</button></div></footer>
</section>                    </div></div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <img style="border-radius:0;width:100%" src="https://sxftech-file.oss-cn-shenzhen.aliyuncs.com/6358a1698431693a0a7df1d02b0d7379.jpg"/>
<section class="section" style="background-color:rgba(0, 0, 0, 0); position: relative; width: 90%; cursor:cursor; margin: 0 auto 0">
    <form class="questionWrap theme-compact fd-questionnaire-body"><section class="question" data-id="1"><h1 class="question-title"><span>姓名</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section><section class="question" data-id="2"><h1 class="question-title"><span>电话号码</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section><section class="question" data-id="4">
        <h1 class="question-title"><span class="question-title-prefix">[多选]</span><span>想了解的近视防控项目</span></h1>
            <div class="weui-cells weui-cells_checkbox">
                    <label class="weui-cell weui-check__label" for="s13">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s13">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>眼角膜塑形镜</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s14">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s14">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>晶体植入</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s15">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s15">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>老花矫正</p>
                            </div>
                    </label>
                    <label class="weui-cell weui-check__label" for="s16">
                            <div class="weui-cell__hd">
                                <input type="checkbox" name="checkbox1" class="weui-check" id="s16">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd">
                                    <p>高端白内障手术</p>
                            </div>
                    </label>
            </div>
    </section></form>
    <footer class="fd-questionnaire-footer"><div class="apply-footer"><button onclick="verify(3)" data-aspm-click="page.applyFooter-btn" style="background: rgb(255, 0, 0);">提交</button></div></footer>
</section>
                    </div></div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <img style="border-radius:0;width:100%" src="https://sxftech-file.oss-cn-shenzhen.aliyuncs.com/55dc6dae57372ea47e63c18313e0e93f.jpg"/>
<section class="section" style="background-color:rgba(0, 0, 0, 0); position: relative; width: 90%; cursor:cursor; margin: 0 auto 0">
    <form class="questionWrap theme-compact fd-questionnaire-body"><section class="question" data-id="1"><h1 class="question-title"><span>姓名</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section><section class="question" data-id="2"><h1 class="question-title"><span>电话号码</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section><section class="question" data-id="4">
        <h1 class="question-title"><span class="question-title-prefix">[多选]</span><span>想了解的近视防控项目</span></h1>
        <div class="weui-cells weui-cells_checkbox">
                <label class="weui-cell weui-check__label" for="s17">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s17">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>眼角膜塑形镜</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s18">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s18">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>晶体植入</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s19">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s19">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>老花矫正</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s20">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s20">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>高端白内障手术</p>
                        </div>
                </label>
        </div>
    </section></form>
    <footer class="fd-questionnaire-footer"><div class="apply-footer"><button onclick="verify(4)" data-aspm-click="page.applyFooter-btn" style="background: rgb(255, 0, 0);">提交</button></div></footer>
</section>                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <img style="border-radius:0;width:100%" src="https://sxftech-file.oss-cn-shenzhen.aliyuncs.com/c010143526310ce8b9a6dafac03fbacf.jpg"/>
                    </div></div>
            </div>
        </div>
        <div class="swiper-slide slidepage">
            <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slidescroll">
                        <img style="border-radius:0;width:100%" src="https://sxftech-file.oss-cn-shenzhen.aliyuncs.com/d52983f9ed9c62afb4af118e32954fd1.jpg"/>
<section class="section" style="background-color:rgba(0, 0, 0, 0); position: relative; width: 90%; cursor:cursor; margin: 0 auto 0">
    <form class="questionWrap theme-compact fd-questionnaire-body"><section class="question" data-id="1"><h1 class="question-title"><span>姓名</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section><section class="question" data-id="2"><h1 class="question-title"><span>电话号码</span><span class="question-title-suffix">*</span></h1><div class="question-body"><input class="Q-input" type="text" placeholder="请输入" data-aspm-click="page.questionBody-QInput"></div></section><section class="question" data-id="4">
        <h1 class="question-title"><span class="question-title-prefix">[多选]</span><span>想了解的近视防控项目</span></h1>
        <div class="weui-cells weui-cells_checkbox">
                <label class="weui-cell weui-check__label" for="s21">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s21">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>眼角膜塑形镜</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s22">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s22">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>晶体植入</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s23">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s23">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>老花矫正</p>
                        </div>
                </label>
                <label class="weui-cell weui-check__label" for="s24">
                        <div class="weui-cell__hd">
                            <input type="checkbox" name="checkbox1" class="weui-check" id="s24">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                                <p>高端白内障手术</p>
                        </div>
                </label>
        </div>
    </section></form>
    <footer class="fd-questionnaire-footer"><div class="apply-footer"><button  onclick="verify(5)" data-aspm-click="page.applyFooter-btn" style="background: rgb(255, 0, 0);">提交</button></div></footer>
</section>                    </div></div>
            </div>
        </div>

    </div>
</div>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>

<script src="http://h5.sxftech.com/assert/js/swiper/swiper.min.js"></script>

        <script>

            //暂时设计每个slide大小需要一致
            barwidth = 0 //导航粉色条的长度px
            tSpeed = 300 //切换速度300ms
            var navSwiper = new Swiper('#nav', {
                slidesPerView: 3,
                freeMode: true,
                on: {
                    init: function() {
                        navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
                        bar = this.$el.find('.bar')
                        bar.css('width', navSlideWidth)
                        bar.transition(tSpeed)
                        navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置
                        clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
                        navWidth = 0
                        for (i = 0; i < this.slides.length; i++) {
                            navWidth += parseInt(this.slides.eq(i).css('width'))
                        }
                        topBar = this.$el.parents('body').find('#top') //页头

                    },

                },
            });

            var pageSwiper = new Swiper('#page', {
                watchSlidesProgress: true,
                resistanceRatio: 0,
                on: {
                    touchMove: function() {
                        progress = this.progress
                        bar.transition(0)
                        bar.transform('translateX(' + navSum * progress + 'px)')
                        //粉色255,72,145灰色51,51,51
                        for (i = 0; i < this.slides.length; i++) {
                            slideProgress = this.slides[i].progress
                            if (Math.abs(slideProgress) < 1) {
                                r = Math.floor((255 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                                g = Math.floor((72 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                                b = Math.floor((145 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
                                navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
                            }
                        }
                    },
                    transitionStart: function() {
                        activeIndex = this.activeIndex
                        activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft
                        //释放时导航粉色条移动过渡
                        bar.transition(tSpeed)
                        bar.transform('translateX(' + activeSlidePosition + 'px)')
                        //释放时文字变色过渡
                        navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)
                        navSwiper.slides.eq(activeIndex).find('span').css('color', 'rgba(255,72,145,1)')
                        if (activeIndex > 0) {
                            navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
                            navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(51,51,51,1)')
                        }
                        if (activeIndex < this.slides.length) {
                            navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
                            navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(51,51,51,1)')
                        }
                        //导航居中
                        navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离

                        navSwiper.setTransition(tSpeed)
                        if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
                            navSwiper.setTranslate(0)
                        } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
                            navSwiper.setTranslate(clientWidth - navWidth)
                        } else {
                            navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
                        }

                    },
                }
            });

            navSwiper.$el.on('touchstart', function(e) {
                e.preventDefault() //去掉按压阴影
            })
            navSwiper.on('tap', function(e) {

                clickIndex = this.clickedIndex
                clickSlide = this.slides.eq(clickIndex)
                pageSwiper.slideTo(clickIndex, 0);
                this.slides.find('span').css('color', 'rgba(51,51,51,1)');
                clickSlide.find('span').css('color', 'rgba(255,72,145,1)');
            })



            //内容滚动
            var scrollSwiper = new Swiper('.scroll', {
                //65是头部的高
                //36是top地址和搜索的高

                slidesOffsetBefore: 36,
                direction: 'vertical',
                freeMode: true,
                slidesPerView: 'auto',

                mousewheel: {
                    releaseOnEdges: true,
                },
                on: {
                    touchMove: function() {

                        if (this.translate > 72 - 36 && this.translate < 72) {
                            topBar.transform('translateY(' + (this.translate - 72) + 'px)');
                        }

                    },
                    touchStart: function() {
                        startPosition = this.translate
                    },
                    touchEnd: function() {
                        topBar.transition(tSpeed)
                        if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
                            topBar.transform('translateY(-36px)');
                            for (sc = 0; sc < scrollSwiper.length; sc++) {
                                if (scrollSwiper[sc].translate > 36) {
                                    scrollSwiper[sc].setTransition(tSpeed);
                                    scrollSwiper[sc].setTranslate(36)
                                }
                            }
                        }
                        if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
                            topBar.transform('translateY(0px)');
                            for (sc = 0; sc < scrollSwiper.length; sc++) {
                                if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                                    scrollSwiper[sc].setTransition(tSpeed);
                                    scrollSwiper[sc].setTranslate(72)
                                }
                            }

                        }
                    },
                    transitionStart: function() {
                        topBar.transition(tSpeed)
                        if (this.translate < 72 - 36) {
                            topBar.transform('translateY(-36px)');
                            if (scrollSwiper) {
                                for (sc = 0; sc < scrollSwiper.length; sc++) {
                                    if (scrollSwiper[sc].translate > 36) {
                                        scrollSwiper[sc].setTransition(tSpeed);
                                        scrollSwiper[sc].setTranslate(36)
                                    }
                                }
                            }
                        } else {
                            topBar.transform('translateY(0px)');
                            if (scrollSwiper) {
                                for (sc = 0; sc < scrollSwiper.length; sc++) {
                                    if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                                        scrollSwiper[sc].setTransition(tSpeed);
                                        scrollSwiper[sc].setTranslate(72)
                                    }
                                }
                            }
                        }
                    },
                }

            })


            //热卖
            var bannerSwiper = new Swiper('.banner', {
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction',
                    renderFraction: function(currentClass, totalClass) {
                        return '<span class="' + currentClass + '"></span>' + '/' + '<span class="' + totalClass + '"></span>';
                    },
                },
            });



            function test1(e){   
                console.log(e.srcElement.checked)
            }
            
            $("input").on("blur",function(){
                window.scroll(0,0);//失焦后强制让页面归位                
            });

            // 光标离开时验证
            // $(".Q-input").on("blur",function(){
            //     if($(".name").val()==''){
            //         $('.question-title-suffix').text('*请输入名字')
            //     }else{
            //         $('.question-title-suffix').text('*')                    
            //     }
            // })

            // 提交时表单验证
            function verify(index){
                // console.log(test.value, $('.question-title-suffix').text())
                if($(".Q-input")[index+index].value==''){
                    $('.question-title-suffix')[index+index].innerHTML = '请输入名字'
                }else{
                    $('.question-title-suffix')[index+index].innerHTML ='*'                   
                }

                if($(".Q-input")[index+index+1].value==''){
                    $('.question-title-suffix')[index+index+1].innerHTML = '请输入手机号'
                }else{
                    $('.question-title-suffix')[index+index+1].innerHTML ='*'                   
                }
            }
        </script>

    </body>
</html>